<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>TWS Javascript Framework - Ajax File Uploader</title>
  <meta name="description" content="TWS Javascript Framework">
  <meta name="author" content="Lee Assam">

  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

  <!-- CSS: implied media=all -->
  <!-- CSS concatenated and minified via ant build script-->
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/menu.css">

  <style type="text/css">
    #fileList {
      padding: 5px;
      border: 1px solid #ccc;
      -moz-box-shadow: 5px 5px 5px #888;
      -webkit-box-shadow: 5px 5px 5px #888;
      box-shadow: 5px 5px 5px #888;
      margin-bottom:10px;
      margin-top:10px;     
    }

    #log {
      margin-left: 20px;
    }
  </style>

  <!-- end CSS-->

  <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

  <!-- All JavaScript at the bottom, except for Modernizr / Respond.
       Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
       For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
  <script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>

<body>

  <div id="container">
    <header>
    <?php include "includes/header.php"?>
    </header>



    <div id="main" role="main">

    <div id="breadcrumbs">
      <a href="index.php">Home</a><span>Ajax File Uploader</span>
    </div>

           <h1>Ajax File Uploader</h1>

          <div class="sectionLeft">
            <form id="form1" action="#" method="post" enctype="multipart/form-data">
              <label for="fileUpload1"> Select a file for upload
              <input id="fileUpload1" name="fileUpload1[]" type="file"/>
              </label>
              <button id="submit1" name="submit1" >Submit</button>
            </form>

            <div id="fileList">
              <p>Files that you have selected :</p>
            </div>
            <div id="log"><p>Event Log: <a id="showLog" href="#">Hide Log</a> &nbsp;&nbsp; <a id="clearLog" href="#">Clear Log</a> </p>              
              <div id="logDetails"></div>
            </div>

          </div>


        <div id="domMessage" style="display:none;">
            <h1>We are processing your request.  Please be patient.</h1>
        </div>
           
    </div>

    <!--Side Section -->
    <aside id="sideContent">
      <div>
        <!-- start slipsum code -->

        <h1>Build Downloads</h1>
        <p>Unminified Version: </p>
        <p>Minified Version: </p>


        <!-- end slipsum code -->
      </div>
    </aside>

    <footer id="footer">
    <?php include "includes/footer.php"?>
    </footer>
  </div> <!--! end of #container -->


  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>


  <!-- scripts concatenated and minified via ant build script-->
  <script defer src="js/plugins.js"></script>
  <script defer src="js/script.js"></script>
  <script src="js/plugins/jquery.blockUI.js"></script>
  <script src="js/plugins/jquery.form.js"></script>
  <script src="js/plugins/jquery.MultiFile.js"></script>

  <script>
      $(function(){

          $('#form1').ajaxForm(
          {
            url : "includes/services/processFileUpload.php",
            type : "POST", //This should be set on the form element
            beforeSubmit:  function(arr, $form, options) {
              // The array of form data takes the following form:
              // [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
              // return false to cancel submit
              $('#logDetails').append('<li>This function was triggerred before the form was submitted</li>');
              //This has to do with the extra empty element that is added with the multiform plugin
              $.fn.MultiFile.disableEmpty(); // before submiting the form
              $.blockUI({ message: '<h1>Just a moment...</h1>' });
            },
            data : {value1 : "Additional Data that was passed"},
            dataType : 'json',
            success : function(response, statusText, xhr, elem) {/*
              1.) responseText or responseXML value (depending on the value of the dataType option).
              2.) statusText
              3.) xhr (or the jQuery-wrapped form element if using jQuery < 1.4)
              4.) jQuery-wrapped form element (or undefined if using jQuery < 1.4)
              */
              $.fn.MultiFile.reEnableEmpty();  // after submiting the form
              $('input:file').MultiFile('reset'); //reset control
              //$('input:file').MultiFile('reset') //To reset file selections

              //Logging the result
              $('#logDetails').append('<li>This is the result of the form submission : </li>' + JSON.stringify(response));
              //showing the images that were uploaded
              if($.isArray(response) && response.length>0) {
                $.each(response, function(index, value){
                  if (value.result) {
                    $('#logDetails').append("<img src='"+value.file_path+"'/><br/>");
                  }
                });
              }
              $.unblockUI();
            },
            error : function (response) {
              //standard ajax error
              $('#logDetails').append('<li>An error occurred when the form was submitted</li>');
              $.unblockUI();
            },
            resetForm : true,
            clearForm : true,
            iframe : true
          }
        );

          $("#showLog").toggle(function(){$(this).text("Show Log"); $("#logDetails").hide(); return false;}, function(){$(this).text("Hide Log");$("#logDetails").show(); return false;})
          $("#clearLog").click(function(){$("#logDetails").html(""); return false;});

          $("#fileUpload1").MultiFile(
            {
              list : "#fileList",
              max: 5,
              accept: 'gif|jpg|png|bmp',
              STRING: {
                remove:'x Remove',
                selected:'Selected file: $file',
                denied:'Files of type $ext are not allowed!'
                //duplicate : 'You already selected that file dumbo!\n$file'
             },
             //events
              onFileRemove: function(element, value, master_element){
              $('#logDetails').append('<li>onFileRemove - '+value+'</li>');
              },
              afterFileRemove: function(element, value, master_element){
              $('#logDetails').append('<li>afterFileRemove - '+value+'</li>');
              },
              onFileAppend: function(element, value, master_element){
              $('#logDetails').append('<li>onFileAppend - '+value+'</li>');
              },
              afterFileAppend: function(element, value, master_element){
              $('#logDetails').append('<li>afterFileAppend - '+value+'</li>');
              },
              onFileSelect: function(element, value, master_element){
              $('#logDetails').append('<li>onFileSelect - '+value+'</li>');
              },
              afterFileSelect: function(element, value, master_element){
              $('#logDetails').append('<li>afterFileSelect - '+value+'</li>');
              }
            });
      });
  </script>
  <!-- end scripts-->

	
  <!-- Change UA-XXXXX-X to be your site's ID
  <script>
    window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });
  </script>
 -->

  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
  <![endif]-->
  
</body>
</html>
